import Image from "next/image";
import Link from "next/link";

interface BoxModule {
  title: string;
  picSrc: string;
  url?: string;
}

const boxModules: BoxModule[] = [
  {
    title: "答题有奖",
    picSrc: "/answer-to-win-prize.svg",
    url: "/answer-to-win-prize",
  },
  {
    title: "导航服务",
    picSrc: "/navigation-service.svg",
    url: "/navigation-service",
  },
  {
    title: "电子留言板及法律法规查询",
    picSrc: "/message-board-and-legal-inquiry.svg",
    url: "/message-board-and-legal-inquiry",
  },
  {
    title: "一键投诉",
    picSrc: "/complain.svg",
  },
];

export default function Home() {
  return (
    <div className="h-full grid grid-cols-2 gap-3 p-2">
      {boxModules.map((item) => (
        <Link
          key={item.title}
          href={item.url || 'tel:0551-12345'}
          className="bg-gray-50 rounded-sm pt-9 pl-7 relative cursor-pointer"
        >
          <h1 className="font-bold text-5xl">{item.title}</h1>
          <Image
            className="absolute bottom-4 right-10"
            width={200}
            height={200}
            style={{ width: '260px', height: 'auto' }}
            src={item.picSrc}
            alt="答题有奖"
            priority
          />
        </Link>
      ))}
    </div>
  );
}
